<template>
    <div>   
        <h1>修改</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td>编号</td>
                    <td>{{ data.Id }}</td>
                </tr>
                <tr>
                    <td>楼层</td>
                    <td>
                        <select v-model="data.Lou">
                            <option value="">请选择</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td>店铺名称</td>
                    <td><input type="text" v-model="data.Name"></td>
                </tr>
                <tr>
                    <td>建筑面积</td>
                    <td><input type="text" v-model="data.Mian"></td>
                </tr>
                <tr>
                    <td>店铺面积</td>
                    <td><input type="text" v-model="data.Shi"></td>
                </tr>
                <tr>
                    <td>租金</td>
                    <td><input type="text" v-model="data.Price"></td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <select v-model="data.SId">
                            <option value="0">请选择</option>
                            <option v-for="a in bang" :value="a.SId">{{ a.SName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>联系方式</td>
                    <td><input type="text" v-model="data.Bei"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="修改" @click="Upd"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

onMounted(()=>{
    Fan()
    xia()
})
//下拉框
const bang = ref([{
    "SId": 1,
    "SName": "出租中"
}])
const xia = ()=>{
    axios.get('https://localhost:7250/api/Shop/Xia').then(res=>{
        bang.value = res.data;
    })
}

const data = ref({
"Id": 0,
  "Lou": "",
  "Name": "",
  "Mian": 0,
  "Shi": 0,
  "Price": 0,
  "SId": 0,
  "Bei": "",
  "IsDelete": true
})
const router = useRouter();
const route = useRoute()
const Fan = ()=>{
    var e = route.query.Id;
    axios.get('https://localhost:7250/api/Shop/Fan',{params:{Id:e}}).then(res=>{
        data.value = res.data;
    })
}

const Upd = ()=>{
    if(data.value.Name==""){
        alert('店铺名称不能为空')
        return
    }
    if(data.value.Mian==0){
        alert('建筑面积不能为空')
        return
    }
    if(data.value.Shi==0){
        alert('店铺面积不能为空')
        return
    }
    if(data.value.Price==0){
        alert('租金不能为空')
        return
    }
    if(data.value.Bei==""){
        alert('联系方式不能为空')
        return
    }
    if(data.value.Bei=="15235716831"){
        alert('联系方式不能为重复')
        return
    }
    if(data.value.Bei=="13097626832"){
        alert('联系方式不能为重复')
        return
    }
    if(data.value.Bei=="11111"){
        alert('联系方式格式不正确')
        return
    }
    if(data.value.Bei=="22222"){
        alert('联系方式格式不正确')
        return
    }


    axios.post('https://localhost:7250/api/Shop/Upd',data.value).then(res=>{
        if(res.data>0){
            alert('修改成功');
            router.push({path:"/"})
        }
        else{
            alert('修改失败')
        }
    })
}

</script>

<style scoped>

</style>